<template>
	<w-container class="flex flex-dir-col" :loading="isLoading">
		<w-navbar id="my-nav" title="合成结果" bgColor="#F5F5F5"></w-navbar>
		<view class="pl-20 pr-16 mt-15">
			<view v-for="(item,index) in result" :key="item.id" class="item-result mb-16" :style="{backgroundImage:`url(${$ossUrl}/static/bg/${resultBg[getRandomInt(0,resultBg.length - 1)]}.png)`}">
				<view class="flex flex-ai-center pa-8">
					<w-image :src="item.main_image" :width="102" :height="102" radius="8"></w-image>
					<view class="flex flex-dir-col font-color-white ml-16 font-size-12">
						<view>{{ item.name }}</view>
						<view class="mt-16">
							<text>#</text>
							<text class="font-size-16 ml-2 font-w-500">{{ item.user_collection_code }}</text>
							<text>/{{ item.total_num }}</text>
						</view>
					</view>
				</view>
			</view>		
		</view>
		<view class="mt-16 plr-20">
			<view class="bg-color-white br-16 plr-16 ptb-20">
				<view class="font-color-textPrimary font-size-16 font-w-500">本次合成使用材料详情：</view>
				<view v-for="(item,idx) in consume" :key="idx" class="mt-12 flex flex-ai-center flex-js-sb">
					<view class="font-size-14"> {{ handleLang(item.name) }}<text class="font-size-16 font-w-500 ml-4">x{{ item.number }}</text></view>
					<view class="font-color-theme">{{ handleLang(statusText[item.method]) }}</view>
				</view>
			</view>
		</view>
		<!-- 藏品 -->
		<!-- <view class="collection">
			<view class="flex-center">
				<w-icon name="rzcg2" size="24"></w-icon>
				<text class="font-size-20 font-color-textPrimary font-w-500 ml-4">{{handleLang('合成成功')}}</text>
			</view>
			<view class="flex-center mtb-16">
				<w-image :src="$ossUrl+'/static/gif/hc.gif'" :isLoc="true" width="242" height="242" radius="8"></w-image>
			</view>
			<view class="flex-center font-color-black font-size-18 font-w-500">{{ getStatus() }}</view>
		</view>
		
		<view class="content bg-color-item flex-1">
			<view class="title font-color-textPrimary">
				<text class="font-color-999">{{handleLang('您可在')}}</text>
				<text class=" mlr-4 font-w-500" @click="jumpMy" v-if="cpStatus">{{handleLang('我的藏品')}}</text>
				<text class=" mlr-4 font-w-500" v-if="cpStatus && sjscStatus">、</text>
				<text class=" mlr-4 font-w-500" @click="$u.route('/pages/shop/shop')" v-if="sjscStatus">{{handleLang('水晶商城')}}</text>
				<text class="font-color-999">{{handleLang('中查看')}}</text>
			</view>
			
			<view v-for="(item,idx) in result" :key="idx" class="card mt-16" :class="{'card_c':item.type=='C','card_m':item.type=='M','card_sj':item.type=='S' }">
				<view class="font-color-black font-size-16 font-size-500 mb-4">{{ handleLang(item.name) }}</view>
				<view class="font-size-12 font-color-minor">
					<block v-if="item.type=='C'">
						# <text class="font-color-black font-size-16 font-size-500">{{ item.user_collection_code }}</text>/{{ item.total_num }}
					</block>
					<block v-if="item.type=='M'">
						X <text class="font-color-black font-size-16 font-size-500 pl-4">{{ item.number }}</text>
					</block>
					<view class="flex-center" v-if="item.type=='S'">
						<w-icon :name="sjIcon(item.crystal_type)" size="20"></w-icon>
						<text class="font-color-black font-size-16 font-size-500 pl-4">{{ item.single_quantity }}</text>
					</view>
				</view>
			</view>
			
			<view class="info">
				<view class="font-size-12 font-w-500 font-color-222">{{handleLang('本次合成销毁详情如下:')}}</view>
				<view class="item" v-for="(item,idx) in consume" :key="idx">
					<view class="name font-color-666">{{handleLang('材料')}}{{ idx+1 }}</view>
					<view class="text font-color-222">
						{{ handleLang(statusText[item.method]) }}-
						<text class="font-size-14  mlr-4">{{ handleLang(item.name) }}</text>
						<text class="font-size-12 ">X</text>
						<text class="font-size-14 ">{{ item.number }}</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="footer bg-color-item">
			<view class="flex-center-sb ptb-10">
				<w-button pain class="btnStyle" @click="$u.route('/pages/shop/shop')" v-if="sjscBtn">{{handleLang('水晶商城')}}</w-button>
				<w-button pain class="btnStyle" @click="jumpMy" v-else>{{handleLang('我的藏品')}}</w-button>
				<w-button class="btnStyle" @click="backPage">{{handleLang('再合一次')}}</w-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</w-container>
</template>

<script>
	import { recordInfo } from '@/api/compound/index.js';
	export default {
		data() {
			return {
				resultBg:['result-1','result-2','result-3','result-4'],
				isLoading: true,
				record_id: "",
				result: [],
				consume: [],
				statusText:{
					'10':'销毁',
					'20':'保留',
					'30':'回收'
				}
			};
		},
		computed:{
			sjscStatus() {
				let result = this.result.map(item=>item.type)
				return result.includes('S')
			},
			cpStatus() {
				let result = this.result.map(item=>item.type)
				let end = result.includes('C') || result.includes('M')
				return end
			},
			sjscBtn() {
				let result = this.result.map(item=>item.type)
				return result.every((value) => value == 'S')
			}
		},
		onLoad(e) {
			this.record_id = e.id;
			this.getDetails()
		},
		methods:{
			// 水晶图标
			sjIcon(type) {
				let obj = {
					'yellow':'hsj',
					'purple':'zsj',
					'blue':'lsj',
					'yellow_log':'hsj',
					'purple_log':'zsj',
					'blue_log':'lsj',
				}
				return obj[type]
			},
			
			// 获取详情
			getDetails() {
				recordInfo({ record_id:this.record_id }).then(res=>{
					this.isLoading = false;
					let { result,consume } = res.data;
					this.result = result;
					this.consume = consume;
				}).catch(()=>{ this.isLoading = false })
			},
			
			// 获取状态
			getStatus() {
				let result = this.result.map(item=>item.type);
				if(result.includes('C') && result.includes('M')){
					return '还有订单处于转入中状态'
				}else if(result.includes('C') && !result.includes('M')){
					return '藏品转入中'
				}else if(result.includes('M') && !result.includes('C')){
					return '盲盒转入成功'
				}else if(result.includes('M') && !result.includes('C')){
					return '盲盒转入成功'
				}
			},
			getRandomInt(min = 0, max) {
			  min = Math.ceil(min);  // 向上取整
			  max = Math.floor(max); // 向下取整
			  return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			jumpMy(){
				// uni.switchTab({
				// 	url:"/pages/my/my"
				// })
				this.$u.route('/pages/myCollection/myCollection')
			}
		}
	}
</script>

<style lang="scss">
	.item-result {
		width: 100%;
		height: 236rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.line{
		width: 200rpx;
		height: 2rpx;
		background: linear-gradient(270deg, $theme-color 0%, rgba(89,142,255,0) 100%);
		opacity: 0.5;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.collection{
		width: 100%;
		padding: 40rpx 0 32rpx;
	}
	.content{
		width: 100%;
		height: auto;
		border-radius: 30rpx 30rpx 0 0;
		@extend .pa-16;
		
		>.title{
			width: 100%;
			height: 66rpx;
			position: relative;
			@extend .flex-center,.font-size-12;
			
			&::before{
				content: '';
				@extend .line;
				left: 0;
			}
			&::after{
				content: '';
				@extend .line;
				background: linear-gradient(270deg, rgba(89,142,255,0) 0%, $theme-color 100%);
				right: 0;
			}
			>text{
				position: relative;
				// background-color: #fff;
				z-index: 1;
			}
		}
		
		>.card{
			width: 100%;
			height: 193rpx;
			background-size: 100% 100%;
			@extend .flex,.flex-dir-col,.flex-js-center;
			
			>view{
				text-align: center;
			}
		}
		>.card_c{
			background-image: url($IMG_URL+'/static/bg/cp-card-bg.png');
		}
		>.card_m{
			background-image: url($IMG_URL+'/static/bg/mh-card-bg.png');
		}
		>.card_sj{
			background-image: url($IMG_URL+'/static/bg/sj-card-bg.png');
		}
		
		>.info{
			width: 100%;
			background: linear-gradient( 47deg, #fff 0%, #fff 48%, #fff 100%);
			border-radius: 16rpx;
			@extend .pa-12,.mt-16;
			
			>.item{
				width: 100%;
				@extend .mt-16,.flex-center-sb;
				>.name{
					width: 20%;
					@extend .font-size-12;
				}
				>.text{
					width: 80%;
					@extend .flex-center,.flex-js-end,.font-size-12;
				}
			}
		}
	}
	.footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		// padding-bottom: calc(var(--safe-area-inset-bottom) + 30rpx);
		background: #fff;
		@extend .plr-20;
		
		.btnStyle{
			width: 320rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
		}
	}
</style>
